<template>
	<view v-if="display" class="dialog-container">
		<view class="dialog-mask" @click.stop="clickHide"></view>
		<view class="shell-main">
			<text class="title">{{title}}</text>
			<slot></slot>
			<text class="Are" @click.stop="clickConfirm">{{confirmText}}</text>
		</view>

	</view>
</template>

<script>
	export default {
		name: "diablog-shell",
		props: {
			title: {
				type: String,
				required: true,
				validator: (value) => {
					return value.length >= 2
				},

			},
			confirmText: {
				type: String,
				default:"确认",
				required: true,
				validator: function(value) {
					return value.length > 0
				},
			}
		},
		data() {
			return {
				display:false
			};
		},
		methods:{
			show(){
				this.display=true
			},
			clickConfirm(){
				this.display=false
				this.$emit("confirm")
			},
			clickHide(){
				this.display=false
			}
		}
	}
</script>

<style>
	@import url("dialog-shell.css");
</style>